<template>
  <div>
    <Echart :options="options" id="centreLeft1Chart" ref="centreLeft1Chart" height="320px" width="620px"></Echart>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  // import {
  //   govAppealList
  // } from '@/api/index'
  export default {
    data() {
      return {
        options: {},
      };
    },
    components: {
      Echart,
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({})
      },
    },
    watch: {
      cdata: {
        handler(newData) {
          console.log(newData.seriesData)
          this.options = {
            title: {
              text: "",
            },
            color: [

              "#32c5e9",
              "#9fe6b8",
              "#ffdb5c",
              "#ff9f7f",
              "#fb7293",
              "#e7bcf3",
              "#8378ea",
              "#37a2da",
            ],
            tooltip: {
              trigger: "item",
              // formatter: "{a} <br/>{b} : {c} ({d}%)"
              formatter: function (params) {
                console.log('paramssdasdasd', params.data.shopTypeDTOList)
                params.data.shopTypeDTOList.forEach((item) => {
                  item.txt = item.shopTypeParentName + '：' + item.value + '条' + '（' + item.ratio + '%' + '）'
                });
                const ids = params.data.shopTypeDTOList.map(item => item.txt).join("<br/>")
                // console.log(ids)
                //'生活百货：10条（20%）' + '<br/>' + '生活百货：10条（20%）'
                // return `${params.name}<br/>纠纷总数：155条<br/>${params.value}<br/>${params.percent}<br/>${arr[0].name}`
                let str = params.name + '<br/>' + '纠纷总数：' + params.value + '条' + '<br/>' + ids
                return str
              }
            },
            toolbox: {
              show: true
            },
            calculable: true,
            legend: {
              orient: "horizontal",
              icon: "circle",
              bottom: 0,
              x: "center",
              data: newData.xData,
              textStyle: {
                color: "#fff"
              }
            },
            series: [{
              name: "纠纷类型统计",
              type: "pie",
              radius: ['60', '100'],
              // roseType: "area",
              center: ["50%", "40%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 4,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: newData.seriesData
            }]
          }
          this.handleMapRandomSelect()
        },
        immediate: true, 
        deep: true
      }
    },
    methods: {
      //跳转路由
    goRouter(){
      console.log('跳转路由')
        window.location = process.env.VUE_APP_GOV_API + '/warningComplaint/complaint-list'
        // window.location = 'http://192.168.0.100:9527' + '/warningComplaint/complaint-list'

    },
      handleMapRandomSelect() {
        this.$nextTick(() => {
          try {
            const map = this.$refs.centreLeft1Chart.chart;
            const _self = this;
            
            map.on('click', function () {
              _self.goRouter();
            
            });
          } catch (error) {
            console.log(error)
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
</style>